<script setup>
import router from "@/router";
import {deleteTask, queryTask} from "@/api/task.js";
import {nextTick, onMounted, ref} from "vue";
import {Close} from "@element-plus/icons-vue";
import {message} from "ant-design-vue";
import {ElMessageBox} from "element-plus";
import AddTaskTemplate from "@/views/task/components/AddTaskTemplate.vue";
import CardDetailDialog from "@/views/task/components/CardDetailDialog.vue";

// 获取数据
onMounted(() => {
  getTaskList()
})
const taskList = ref([])
const getTaskList = async () => {
  let res = await queryTask()
  taskList.value = res.data
}
// 跳转
const handlePush = (data) => {
  console.log(data)
  router.push(`/task/content/${data.id}`);
};
// 添加一个任务
const AddTaskTemplateRef = ref(null);
const handleAdd = () => {
  nextTick(() => {
    console.log(AddTaskTemplateRef.value.show());
  })
}

// 鼠标悬浮
const currentTask = ref(null)
// 删除
const delTaskId = ref(null)
const handleDel = (id) => {
  delTaskId.value = id
  ElMessageBox.confirm("是否确认删除该面板？",
      "Warning",
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
    const params = {id}
    let res = await deleteTask(params)

    if (res.code === 200) {
      message.success("删除成功")
      await getTaskList()
    }
  }).catch()
    .finally(() => {
        delTaskId.value = null
      })
}

// 修改看板名称
const updateTaskId = ref(null)
const cardDetailRef = ref(null);


</script>

<template>
  <div class="page-container">
    <div class="top flex-between-center">
      <h1 class="title">看板中心</h1>
      <div class="btn">
        <el-button type="success" @click="handleAdd">新建看板</el-button>
        <add-task-template ref="AddTaskTemplateRef" @getTaskList="getTaskList"></add-task-template>
      </div>
    </div>
    <div class="task-list">
      <div v-for="task in taskList" :key="task.id" :class="delTaskId === task.id ? 'shake-animation':''"
           :style="task.bgColor" class="task-item pointer" @mouseenter="currentTask = task.id" @mouseleave="currentTask = null"
           @click.prevent="handlePush(task)">
        <div class="task-title">{{ task.taskName }}</div>
        <el-icon v-show="currentTask === task.id" class="task-close-icon" @click.stop="handleDel(task.id)">
          <Close/>
        </el-icon>
      </div>
    </div>

  </div>
</template>

<style lang="less" scoped>
.page-container {
  .top {
    height: 80px;

    .title {
      line-height: 80px;
      font-size: 20px;
      font-weight: bolder;
    }
  }

  .task-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .task-title {

      color: white;
      font-weight: bolder;
      font-size: 16px;

    }

    .task-item {
      position: relative;
      width: 250px;
      height: 120px;
      background: #e0e0e0;
      border-radius: 10px;
      margin-bottom: 20px;
      margin-right: 20px;
      padding: 15px;

      .task-close-icon {
        position: absolute;
        right: 0;
        top: 20%;
        font-size: 20px;
        color: white;
        font-weight: bold;
        transform: translate(-50%, -50%);
      }
    }
  }
}

.btn {
  position: relative;

}

.shake-animation {
  animation: shake-animation 0.5s; /* 调整动画持续时间和效果 */
  animation-iteration-count: infinite; /* 让动画无限次数播放 */
}

@keyframes shake-animation {
  0% {
    transform: translateX(0);
  }
  10% {
    transform: translateX(-5px);
  }
  20% {
    transform: translateX(5px);
  }
  30% {
    transform: translateX(-5px);
  }
  40% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-5px);
  }
  60% {
    transform: translateX(5px);
  }
  70% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}
</style>
